<template>
  <div>
    <g-layout :isShowLeftSider="false">
      <template #content>
        <div class="content-container">
          <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="基础滚动"
              ><ScrollContainer class="mt-4">
                <ul class="p-3">
                  <template v-for="index in 100" :key="index">
                    <li class="p-2" :style="{ border: '1px solid #eee' }">
                      {{ index }}
                    </li>
                  </template>
                </ul>
              </ScrollContainer></a-tab-pane
            >
            <a-tab-pane key="2" tab="虚拟滚动" force-render>
              <VScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="50">
                <template #default="{ item }">
                  <div class="virtual-scroll-demo__item">
                    {{ item.title }}
                  </div>
                </template>
              </VScroll>
            </a-tab-pane>
          </a-tabs>
        </div>
      </template>
    </g-layout>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import IndexMixin from './index-mixin';
  export default defineComponent({
    name: 'scroll',
    mixins: [IndexMixin],
  });
</script>

<style lang="less" scoped>
  .content-container {
    padding: 16px;
  }
  .scroll-wrap {
    width: 50%;
    height: 300px;
    background-color: @component-background;
  }

  .virtual-scroll-demo {
    &-wrap {
      display: flex;
      margin: 0 30%;
      background-color: @component-background;
      justify-content: center;
    }
    &__item {
      height: 40px;
      padding: 0 20px;
      line-height: 40px;
      border-bottom: 1px solid @border-color-base;
    }
  }
</style>
